<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Diff the ends </title>
  <style>
    body {
      background-color: #2a2a2a;
      color: #dcdcdc;
    }

    div>tt {
      line-height: 1.2em;
      letter-spacing: 2px;
      font-size: 24px;
      font-family: monospace;

      transition: 2s;
    }

    tt#rmv {
      color: #b8d7a3;
    }

    tt#tmv {
      color: #569cd6;
    }
  </style>
</head>

<body>
  <p>输入借位二进制：<input id="tpr" type="text" value="0" /></p>
  <p>输入数字三进制：<input id="tpt" type="text" value="1" /></p>

  <div>
    <tt id="rmv"></tt>
    <br>
    <tt id="tmv"></tt>
  </div>

  <script src="./machine_plus.js"></script>

  <script>
    const tpt = document.querySelector('#tpt');
    const tpr = document.querySelector('#tpr');
    const rcd = document.querySelector('#rcd');
    const rmv = document.querySelector('#rmv');
    const tmv = document.querySelector('#tmv');
    
    async function play3n1() {
      if(!init3n1()) return false;
    }

    function init3n1(){

      robots = Array.from(tpr.value).map(e => +e);
      track = Array.from(tpt.value).map(e => +e);

      if (robots.some(e => e > 1) || track.some(e => e > 2)) {
        robots.length = 0;
        track.length = 0;
        alert('错误的输入');
        return false;
      }

      rmv.textContent = robots.map(e => ROBOT_SIGN[e]).join('');
      tmv.textContent = track.map(e => TRACK_SIGN[e]).join('');

    }

    tpr.addEventListener('change', () => {
      play3n1();
    }, false);
    tpt.addEventListener('change', () => {
      play3n1();
    }, false);

  </script>
</body>

</html>